<!-- 实验室管理 开放管理:待审研学 -->
<template>
	<view>

		<view class="search-input "><label class="iconfont icon-sousuo" /><input type="text" confirm-type="search" v-model="search"
			 class="font-size24" placeholder="搜索" /></view>
		<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
			<view class="jn-grid-list">
				<view class="jn-staff-list-cell">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in staffs" :options="options" :key="index" @click="removeDetils(item,index)">
							<view class="item" @click.stop="staffflow(item)">
								
								<u-card :title="item.F_DepartmentName" :thumb="item.F_EnCode"   >
									<template v-slot:body>
										<view >
											<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
												<image :src="item.F_Id" mode="aspectFill" @click="staffflow(item)"></image>
											</view>
										</view>
										<view >
											<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
												<view class="u-body-item-title u-line-2">{{item.F_Gender}}</view>
											</view>
										</view>
										<view >
											<view class="color-3A3A3A">出行日期：{{item.F_Date}}</view>
											<view class="color-3A3A3A">人数：{{item.F_Num}}</view>
											<view class="color-3A3A3A">班级：{{item.F_Class}}</view>
										</view>
									</template>
									<template v-slot:foot>
										<!-- <view class=""><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view> -->
									</template>
								</u-card>
								
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
		</scroll-view>
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		
		<!-- <uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction" @creqateopen="creqateopen"></uni-fab> -->
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniFab,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				show: false,
				datevalue: new Date().toLocaleDateString(),
				search: '',
				rows: 10,
				page: 1,
				total: 1,
				height: 0,
				staffList: [],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: "#007AFF"
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		onLoad() {
			this.init();
		},
		computed: {
			staffs: function() {
				let search = this.search;
				let staffList = this.staffList;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
		},
		onShow() {
			this.staffs.length = 0;
			this.init();
			this.$forceUpdate();
		},
		methods: {
			  /* 根据不同用户返回不同菜单 */
			  dogetmenu(){
				//vue 模拟后台返回json数组，赋在页面数据json的列表中
				//https://www.cnblogs.com/hailexuexi/p/14930809.html
				var jsonArrStr ='';
				
				var userid=uni.getStorageSync('userid');
				console.log('研学-用户:'+userid);
				
				/* 政府 */
				if(userid=="1001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base2.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "五年级","gender": "中共一大会址","departmentName": "闵行春申小学","num": "198","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc2.png","class": "一年级","gender": "上海博物馆","departmentName": "闵行莘城学校","num": "268","date": "2025-05-16"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base2.jpg","enCode": "http://180.166.193.6:90/images/study/sc2.png","class": "二年级","gender": "中共一大会址","departmentName": "闵行莘城学校","num": "292","date": "2025-05-16"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base5.jpg","enCode": "http://180.166.193.6:90/images/study/sc3.png","class": "初三","gender": "上海国际汽车城","departmentName": "闵行莘松学校","num": "190","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base1.jpg","enCode": "http://180.166.193.6:90/images/study/sc3.png","class": "初一","gender": "上海交大生物","departmentName": "闵行莘松学校","num": "212","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';		
				}
				
				/* 机构 */
				if(userid=="2001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base2.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "一年级","gender": "中共一大会址","departmentName": "闵行春申小学","num": "198","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc2.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行莘城学校","num": "268","date": "2025-05-16"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base2.jpg","enCode": "http://180.166.193.6:90/images/study/sc2.png","class": "五年级","gender": "中共一大会址","departmentName": "闵行莘城学校","num": "292","date": "2025-05-16"}';
				  jsonArrStr=jsonArrStr+']';		
				
				}
				
				/* 基地 */
				if(userid=="3001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc2.png","class": "一年级","gender": "上海博物馆","departmentName": "闵行莘城学校","num": "268","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';	
				
				}
				
				/* 学校 */
				if(userid=="4001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+',{"id": "http://180.166.193.6:90/images/study/base2.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "五年级","gender": "中共一大会址","departmentName": "闵行春申小学","num": "198","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 老师 */
				if(userid=="5001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 学生 */
				if(userid=="6001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "http://180.166.193.6:90/images/study/sc1.png","class": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';	
				
				}
				
				/* 家长 */
				if(userid=="7001"){
				  jsonArrStr=jsonArrStr+'[{"id": "http://180.166.193.6:90/images/study/base10.jpg","enCode": "孔融","http://180.166.193.6:90/images/study/sc1.png": "四年级","gender": "上海博物馆","departmentName": "闵行春申小学","num": "250","date": "2025-05-06"}';
				  jsonArrStr=jsonArrStr+']';	
				
				}
				
				//console.log(jsonArrStr);
				
				var jsonArr = JSON.parse(jsonArrStr);//将字符串 转为 json对象 数组 JSON.parse要求 json格式 严格
				//console.log(jsonArr);
				
				return jsonArr;
			},
			
			// 日历打开
			calopen() {
			  this.currentDate = new Date().toLocaleDateString();
			  console.log(this.currentDate);
			  this.show = true ;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list": [
								{
									"id": "5dd1b361109e4ebbb5897ba9057513de",
									"enCode": "孔融",
									"class": "一年级",
									"gender": "上海博物馆",
									"departmentName": "闵行春申小学",
									"num": "250",
									"date": "2024-12-09"
								},
								{
									"id": "4f217313863c48aca88f012d61f99806",
									"enCode": "马超",
									"class": "五年级",
									"gender": "中共一大会址",
									"departmentName": "闵行莘城学校",
									"num": "268",
									"date": "2024-12-09"
								},
								{
									"id": "4f217313863c48aca88f012d61f99806",
									"enCode": "柴荣",
									"class": "初一",
									"gender": "上海国际汽车城",
									"departmentName": "闵行莘松学校",
									"num": "190",
									"date": "2024-12-09"
								}
							],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 5
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				this.page = 1;
				let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
				this.total = _total;
				// console.log(this.total)
				//let staff = res.data.data.list;
				let staff =this.dogetmenu();
				this.staffList=[];
				for (let i = 0; i < staff.length; i++) {
					this.staffList.push({
						'F_Id': staff[i].id,
						'F_EnCode': staff[i].enCode,
						'F_Gender': staff[i].gender,
						'F_DepartmentName': staff[i].departmentName,
						'F_Num': staff[i].num,
						'F_Class': staff[i].class,
						'F_Date': staff[i].date
					})
				}
			},
			scrollButtonClick() {
				console.log("scrollButtonClick")
			},
			staffflow(item) {
				console.log('staffflow')
				uni.navigateTo({
					url: './6form?id=' + item.F_Id
				})
			},
			removeDetils(item, index) {
				console.log('removeDetils')
				console.log(item)
			},
			creqateopen() {
				uni.navigateTo({
					url: './6form'
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}
	.jn-item-cell-left {
		width: 46%;
	}

	.search-input {
		background: #FFFFFF;
	}

	.item {
		border-radius: 10upx;
		width: 100%;

		.jn-item-cell {
			padding: 0;
			background-color: #FFFFFF;
			.jn-list-cell {
				padding: 0 20upx;
				margin-bottom: 10upx;

				&.cell {
					height: 48upx;
					.rightWidth{
						width: 200rpx;
					}
				}
			}
		}

		.head {
			height: 66upx;
			border-bottom: 1upx solid #e5e5e5;
		}
	}
</style>
